<template>
	<view>
		<view class="drawer-button">
			<view class="drawer-header datetime-picker" style="display: flex;">
				<text>异常时间</text>
				<view class="picker-date">
					<picker mode="date" :value="dqrq" :start="dqrq" @change="handleDateChange" :disabled="jyzj">
						<view class="picker-text">{{currentDate}}</view>
					</picker>
				</view>
				<view class="picker-time">
					<picker mode="time" :value="dqsj" @change="handleTimeChange" :disabled="jyzj">
						<view class="picker-text">{{currentTime}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="drawer-button">
			<view class="drawer-header">
				<text>上报位置:{{qrdz}}</text>
				<view>
					<button style="width: 85%;" @click="qwdw" :disabled="jyzj">前往定位</button>
				</view>
			</view>
		</view>
		<view class="drawer-button">
			<view class="drawer-header">
				<picker mode="selector" :range="lx" range-key="text" @change="onPickerChange" style="width: 100%;background-color: darkgray;" :disabled="jyzj">
				        异常类型：{{selectedText || '请选择'}}  
				</picker>
			</view>
		</view>
		<view class="drawer-button">
			<view class="drawer-header">
				<text>异常描述</text>
			</view>
			<view class="large-input">
				<textarea placeholder="请输入内容..." :value="content" @input="onInput" :maxlength="1000" :focus="isFocused" :autosize="true" :show-confirm-bar="false" :disabled="jyzj"/>
			</view>
		</view>
		<view class="drawer-button">
			<view class="drawer-header">
				<text>上传图片（最多6张）</text>
			</view>
			<view class="large-input">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" v-if="tp.length<6" :disabled="jyzj">
					<icon class="iconfont icon-tupian" style="font-size: 50rpx;"></icon>
				</button>
				<image class="avatar" :src="tp[0]" v-if="tp.length>=1"></image>
				<image class="avatar" :src="tp[1]" v-if="tp.length>=2"></image>
				<image class="avatar" :src="tp[2]" v-if="tp.length>=3"></image>
				<image class="avatar" :src="tp[3]" v-if="tp.length>=4"></image>
				<image class="avatar" :src="tp[4]" v-if="tp.length>=5"></image>
				<image class="avatar" :src="tp[5]" v-if="tp.length>=6"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dqrq:'',
				dqsj:'',
				currentDate: '请选择日期',
				currentTime: '请选择时间',
				content: '', // 输入框的内容
				isFocused: false, // 是否聚焦
				lx:[
					{
						id:'1',
						text:'类型1'
					},
					{
						id:'2',
						text:'类型2'
					},
					{
						id:'3',
						text:'类型3'
					},
				],
				selectedIndex: 0, // 用于记录选中的索引  
				selectedText: '', // 用于显示选中的文本  
				selectedId: '', // 用于存储选中的id  
				qrdz:'',
				lzym:'',
				tp:[],
				jyzj:false,
			}
		},
		methods: {
			handleDateChange(e) {
			    const dateValue = e.detail.value;
			    this.currentDate=dateValue
			},
			handleTimeChange(e) {
			    const timeValue = e.detail.value;
			    this.currentTime=timeValue
			},
			onPickerChange(e) {  
			    const index = e.detail.value; // 获取选中的索引  
			    this.selectedIndex = index;  
			    this.selectedText = this.lx[index].text; // 更新显示的文本  
			    this.selectedId = this.lx[index].id; // 更新选中的id  
			},
			onChooseAvatar(e) {
				const { avatarUrl }=e.detail
				if(this.tp.length===0){
					this.tp[0]=avatarUrl
				}else if(this.tp.length===1){
					this.tp[1]=avatarUrl
				}else if(this.tp.length===2){
					this.tp[2]=avatarUrl
				}else if(this.tp.length===3){
					this.tp[3]=avatarUrl
				}else if(this.tp.length===4){
					this.tp[4]=avatarUrl
				}else if(this.tp.length===5){
					this.tp[5]=avatarUrl
				}else{
					this.tp[6]=avatarUrl
				}
			},
			qwdw(){
				wx.redirectTo({
					url:'/pages/index/Zaituml/Dinwei'
				})
			}
		},
		onLaunch() {
			this.dqrq = new Date.toLocaleString();
			this.dqrqs = new Date.toLocaleString();
			this.dqsj = new time.toLocaleString();
			this.dqsjs = new time.toLocaleString();
		},
		onLoad:function(options){
			/* if(options!={}){
				const receivedEntity = JSON.parse(decodeURIComponent(options.value));
				console.log(receivedEntity)
			} */
			const receivedEntity = JSON.parse(decodeURIComponent(options.value));
			if (receivedEntity.pd===2) {  
				console.log("进入")
				wx.request({
					url:'https://apis.map.qq.com/ws/geocoder/v1',
					data:{
						key:'QXYBZ-ELWL4-24GUV-K6GFK-I2LVF-EDBTJ',
						location: `${receivedEntity.wd},${receivedEntity.jd}`
					},
					method: 'GET',
					success: (res) => {
						this.qrdz=res.data.result.address_component.province+"-"+res.data.result.address_component.city+"-"+res.data.result.address_component.district
					}
				})
			}else if(receivedEntity.pd===3){
				console.log("禁用")
				this.jyzj=true;
			}else{
				console.log("无果")
			}
		},
	}
</script>

<style scoped>
.drawer-content {
  display: none;
  position: relative;
  padding: 10px;
  
}
.datetime-picker {
  display: flex;
}
.drawer-content.show {
  display: block;
}
.large-input {
  margin: 20rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
  overflow: hidden;
}
.large-input textarea {
  width: 100%;
  min-height: 150rpx;
  max-height: 300rpx;
  padding: 10rpx;
  box-sizing: border-box;
  resize: none;
  outline: none;
  background-color: #fff;
  border: none;
  font-size: 25rpx;
  color: #333;
}
.picker-date, .picker-time {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}
.picker-text {
  padding: 10rpx 20rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
  background-color: #fff;
}
.iconfont {
  margin-right: 0%; /* 新增 */
}
.avatar{
	width: 25%;
	height: 100rpx;
	margin-bottom: 75rpx;
}
  
 
</style>
